import {Navigate, RouteObject} from "react-router-dom";
import {JSX, lazy, Suspense} from "react";
import Layout from "../pages/layout.tsx"
import LoginPage from "@/pages/auth/login"
// 懒加载组件
const About = lazy(() => import("../pages/About/index.tsx"))
const Home = lazy(() => import("../pages/Home"))
const Page301 = lazy(() => import("../pages/test/Page301.tsx"))

const withLoadingComponent = (component: JSX.Element) => <Suspense
    fallback={<div>loading...</div>}>{component}</Suspense>

const routers: RouteObject[] = [
    {
        path: "/",
        element: <Navigate to="/home"/>,
    },
    {
        path: "/",
        element: <Layout/>,
        children: [
            {
                path: '/home',
                element: withLoadingComponent(<Home/>)
            },
            {
                path: '/about',
                element: withLoadingComponent(<About/>)
            },
            {
                path: '/page3/page301',
                element: withLoadingComponent(<Page301/>)
            }
        ]
    },
    {
        path: '/auth/login',
        element: <LoginPage/>
    },
    // 访问其余路径的时候直接跳转到首页
    {
        path: "*",
        element: <Navigate to="/home"/>
    }

];

export default routers;